<template>
  <view class="pending-data-detail">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-content">
        <view class="navbar-left" @click="goBack">
          <image src="/static/icons/arrow-left.svg" style="width: 20px; height: 20px; color: #fff;"></image>
        </view>
        <view class="navbar-title">{{ getTitle() }}</view>
        <view class="navbar-right"></view>
      </view>
    </view>

    <!-- 页面内容 -->
    <view class="page-content">
      <!-- 统计概览 -->
      <view class="stats-overview">
        <view class="stats-card">
          <view class="stats-number">{{ dataList.length }}</view>
          <view class="stats-label">总计</view>
        </view>
        <view class="stats-card">
          <view class="stats-number">{{ getHighPriorityCount() }}</view>
          <view class="stats-label">高优先级</view>
        </view>
        <view class="stats-card">
          <view class="stats-number">{{ getTodayCount() }}</view>
          <view class="stats-label">今日新增</view>
        </view>
      </view>

      <!-- 筛选器 -->
      <view class="filter-section">
        <view class="filter-tabs">
          <view 
            class="filter-tab" 
            :class="{ active: activeFilter === 'all' }"
            @click="setFilter('all')"
          >
            全部
          </view>
          <view 
            class="filter-tab" 
            :class="{ active: activeFilter === 'high' }"
            @click="setFilter('high')"
          >
            高优先级
          </view>
          <view 
            class="filter-tab" 
            :class="{ active: activeFilter === 'today' }"
            @click="setFilter('today')"
          >
            今日新增
          </view>
        </view>
      </view>

      <!-- 数据列表 -->
      <view class="data-list">
        <view 
          v-for="item in filteredDataList" 
          :key="item.id" 
          class="data-item"
          @click="viewDetail(item)"
        >
          <view class="item-header">
            <view class="item-title">{{ item.title }}</view>
            <view class="item-status" :class="getStatusClass(item)">{{ getStatusText(item) }}</view>
          </view>
          <view class="item-content">
            <view class="item-info">
              <image src="/static/icons/map-pin.svg" style="width: 14px; height: 14px; color: #fff;"></image>
              <text class="info-text">{{ item.location }}</text>
            </view>
            <view class="item-info">
              <image src="/static/icons/clock.svg" style="width: 14px; height: 14px; color: #fff;"></image>
              <text class="info-text">{{ item.time }}</text>
            </view>
          </view>
          <view class="item-footer" v-if="item.description">
            <text class="item-description">{{ item.description }}</text>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-if="filteredDataList.length === 0" class="empty-state">
        <image src="/static/icons/inbox.svg" style="width: 60px; height: 60px; color: #fff;"></image>
        <text class="empty-text">暂无数据</text>
      </view>
    </view>

    <!-- 刷新按钮 -->
    <view class="refresh-btn" @click="refreshData">
      <image src="/static/icons/reload.svg" style="width: 20px; height: 20px; color: #fff;"></image>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 页面参数
const dataType = ref('')
const dataList = ref([])
const activeFilter = ref('all')
const loading = ref(false)

// 页面加载
onLoad((options) => {
  dataType.value = options.type || 'exception'
  loadData()
})

// 获取页面标题
const getTitle = () => {
  const titles = {
    exception: '异常单详情',
    register: '待登记详情',
    verify: '待核验详情'
  }
  return titles[dataType.value] || '详情'
}

// 加载数据
const loadData = async () => {
  try {
    loading.value = true
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 500))
    
    // 使用本地生成的模拟数据
    dataList.value = generateMockData(dataType.value, 20)
  } catch (error) {
    console.error('加载数据失败:', error)
    uni.showToast({
      title: '加载失败',
      icon: 'error'
    })
  } finally {
    loading.value = false
  }
}

// 生成模拟数据
const generateMockData = (type, count) => {
  const data = []
  const locations = ['东区A1', '西区B2', '南区C3', '北区D4', '中心E5', '临时F6']
  const levels = ['high', 'medium', 'low']
  const statuses = ['pending', 'processing', 'completed']
  
  for (let i = 0; i < count; i++) {
    const item = {
      id: `${type}_${Date.now()}_${i}`,
      title: getTitleByType(type, i),
      location: locations[Math.floor(Math.random() * locations.length)],
      time: getRandomTime(),
      level: levels[Math.floor(Math.random() * levels.length)],
      status: statuses[Math.floor(Math.random() * statuses.length)],
      description: getDescriptionByType(type)
    }
    data.push(item)
  }
  
  return data
}

// 根据类型获取标题
const getTitleByType = (type, index) => {
  const titles = {
    exception: [`设备异常报警 ${index + 3}`, `数据传输异常 ${index + 3}`, `系统故障 ${index + 3}`],
    register: [`新设备登记 ${index + 3}`, `设备信息更新 ${index + 3}`, `设备迁移登记 ${index + 3}`],
    verify: [`巡检数据核验 ${index + 3}`, `设备状态核验 ${index + 3}`, `数据完整性核验 ${index + 3}`]
  }
  const typeArray = titles[type] || []
  return typeArray[index % typeArray.length]
}

// 根据类型获取描述
const getDescriptionByType = (type) => {
  const descriptions = {
    exception: '设备运行异常，需要及时处理',
    register: '等待管理员审核登记信息',
    verify: '数据需要进一步核验确认'
  }
  return descriptions[type] || ''
}

// 获取随机时间
const getRandomTime = () => {
  const now = new Date()
  const randomHours = Math.floor(Math.random() * 24)
  const randomMinutes = Math.floor(Math.random() * 60)
  const date = new Date(now.getTime() - randomHours * 60 * 60 * 1000 - randomMinutes * 60 * 1000)
  
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hour = String(date.getHours()).padStart(2, '0')
  const minute = String(date.getMinutes()).padStart(2, '0')
  
  return `${year}-${month}-${day} ${hour}:${minute}`
}

// 筛选后的数据列表
const filteredDataList = computed(() => {
  if (activeFilter.value === 'all') {
    return dataList.value
  } else if (activeFilter.value === 'high') {
    return dataList.value.filter(item => item.level === 'high')
  } else if (activeFilter.value === 'today') {
    const today = new Date().toISOString().split('T')[0]
    return dataList.value.filter(item => item.time.startsWith(today))
  }
  return dataList.value
})

// 获取高优先级数量
const getHighPriorityCount = () => {
  return dataList.value.filter(item => item.level === 'high').length
}

// 获取今日数量
const getTodayCount = () => {
  const today = new Date().toISOString().split('T')[0]
  return dataList.value.filter(item => item.time.startsWith(today)).length
}

// 设置筛选器
const setFilter = (filter) => {
  activeFilter.value = filter
}

// 获取状态样式类
const getStatusClass = (item) => {
  if (item.level === 'high') return 'status-high'
  if (item.level === 'medium') return 'status-medium'
  return 'status-low'
}

// 获取状态文本
const getStatusText = (item) => {
  const statusTexts = {
    high: '高优先级',
    medium: '中优先级',
    low: '低优先级'
  }
  return statusTexts[item.level] || '普通'
}

// 查看详情
const viewDetail = (item) => {
  uni.showModal({
    title: item.title,
    content: `位置：${item.location}\n时间：${item.time}\n描述：${item.description}`,
    showCancel: false
  })
}

// 刷新数据
const refreshData = () => {
  loadData()
  uni.showToast({
    title: '刷新成功',
    icon: 'success'
  })
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.pending-data-detail {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
}

.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(102, 126, 234, 0.95);
  backdrop-filter: blur(10px);
  padding-top: var(--status-bar-height);
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
}

.navbar-left,
.navbar-right {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.page-content {
  padding-top: calc(var(--status-bar-height) + 44px + 20px);
  padding-bottom: 80px;
  padding-left: 16px;
  padding-right: 16px;
}

.stats-overview {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.stats-card {
  flex: 1;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stats-number {
  font-size: 24px;
  font-weight: 700;
  color: #667eea;
  margin-bottom: 4px;
}

.stats-label {
  font-size: 12px;
  color: #666;
}

.filter-section {
  margin-bottom: 20px;
}

.filter-tabs {
  display: flex;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.filter-tab {
  flex: 1;
  text-align: center;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: #666;
  transition: all 0.3s ease;
  
  &.active {
    background: #667eea;
    color: #fff;
    font-weight: 600;
  }
}

.data-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.data-item {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.98);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  }
}

.item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.item-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  flex: 1;
}

.item-status {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  
  &.status-high {
    background: #fee2e2;
    color: #dc2626;
  }
  
  &.status-medium {
    background: #fef3c7;
    color: #d97706;
  }
  
  &.status-low {
    background: #dcfce7;
    color: #16a34a;
  }
}

.item-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.item-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.info-text {
  font-size: 14px;
  color: #666;
}

.item-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.item-description {
  font-size: 14px;
  color: #999;
  line-height: 1.4;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.empty-text {
  margin-top: 16px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
}

.refresh-btn {
  position: fixed;
  bottom: 30px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: #667eea;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  z-index: 999;
  
  &:active {
    transform: scale(0.95);
  }
}

/* 响应式适配 */
@media (max-width: 375px) {
  .stats-overview {
    gap: 8px;
  }
  
  .stats-card {
    padding: 12px;
  }
  
  .stats-number {
    font-size: 20px;
  }
  
  .page-content {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .pending-data-detail {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  }
  
  .custom-navbar {
    background: rgba(26, 26, 46, 0.95);
  }
  
  .stats-card,
  .filter-tabs,
  .data-item {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
  }
  
  .item-title {
    color: #fff;
  }
  
  .info-text,
  .item-description {
    color: rgba(255, 255, 255, 0.7);
  }
}
</style>